<template>
	<view>
		<view class="content_type">
			<view class="aboveContent">
				<view>
					<image :src="portrait" style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
				</view>
				<view style="margin-left: 15rpx;">
					<view style="font-size: 28rpx;font-weight: bold;">{{PublisherName}}</view>
					<view style="font-size: 24rpx;color: #C1C1C1;">{{pastTime}}</view>
				</view>
			</view>
			<view style="font-size: 28rpx;margin-top: 10rpx;">{{content}}</view>
			<view class="tupian_list" v-if="!isvideo">
				<view v-for="(itm,indexs) in introductionPicture" :key="indexs" @tap="browse(indexs)">
					<image :src="itm"  :class="introductionPicture.length == 1 ? 'yige' : 'duoge'" ></image>
				</view>
			</view>
			<view class="tupian_list" v-if="isvideo" >
				<keep-alive>
					<view v-for="(itm,indexs) in introductionPicture" :key="indexs">
						 <view class="page-body">
							<view class="page-section page-section-gap" style="text-align: center;">
								<video style="text-align: left" :src="itm" ></video>
							</view>
						</view>
					</view>
				</keep-alive>
			</view>
		</view>
		
		<view  id="editor" class="arriveTopClass" >
			<van-tabs swipeable animated   @change="onChange" v-model="active"   class="index_tabs" :title-active-color="titleColor" color="#FF7300">
				<van-tab :title="pinglun">
					<view class="slideCla">
						<baobao :fatherData="noteCommentEntities"  :num_shu="v_if" :id="id" :isSlide="isSlide" v-if="v_if == 0"></baobao>
					</view>
				</van-tab>
				<van-tab :title="dainzan">
					<view class="slideCla">
						<baobao :fatherData="likeinfo"   :num_shu="v_if" :id="id" :isSlide="isSlide" v-if="v_if == 1"></baobao>
					</view>
				</van-tab>
			</van-tabs>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				carryData: {},
				portrait: "",
				pastTime: "",
				PublisherName: "",
				introductionPicture: [],
				isvideo: false,
				videoDate: "",
				content: "",
				likeinfo: [],
				noteCommentEntities: [],
				pinglun: "",
				dainzan: "",
				titleColor: "#FF7300",
				z_index: 12121,
				active: 0,
				v_if: 0,
				id: "",
				distanceTopJudge: false,
				startPageX: "",
				endPageX: "",
				startPageY: "",
				endPageY: "",
				disparityDistance: 0,
				isSlide: false,
				isDisplay: true,
				top: -50
			}
		},
		
		onPageScroll(res) {
			let me = this
			this.getTopDistance()
		},
		
		methods: {
			getTopDistance() {
				let me = this
				const query = uni.createSelectorQuery().in(this);
				query.select('#editor').boundingClientRect(data => {
					if(data.top < 18){
						me.distanceTopJudge = true
						me.isSlide = true
						me.isDisplay = false
					}else {
						me.distanceTopJudge = false
						me.isSlide = false
						me.isDisplay = true
					}
				}).exec();
			},
			
			zizujian(index) {
				this.pinglun = "评论" + " " + index
			},
			
			day_fun(day_time){
				let dangqian = new Date().getTime()
				let day_time_ = day_time.replace(/-/g, '/')
				let day = new Date(day_time_).getTime()
				let chazhi = dangqian - day
				let fanhui = ""
				if(chazhi > 30*24*60*60*1000){
					fanhui = "一个月前"
				}else if(chazhi > 7*24*60*60*1000){
					fanhui = "一周前"
				}else if(chazhi > 24*60*60*1000 && 7*24*60*60*1000 > chazhi){
					let tian = (chazhi / (24*60*60*1000)).toFixed(0)
					fanhui = tian + "天前"
				}else if(chazhi < 24*60*60*1000 && chazhi > 60*60*1000){
					let shi = (chazhi / (60*60*1000)).toFixed(0)
					fanhui = shi + "小时前"
				}else if(chazhi < 60*60*1000 ){
					let fen = (chazhi / (60*1000)).toFixed(0)
					if(fen == 0){
						fanhui = "1分钟前"
					}else{
						fanhui = fen + "分钟前"
					}
				}
				return fanhui
			},
			
			details() {
				let me = this
				uni.request({
					url: "https://curiousmore.com/qmore/message/noteUser/queryListPage",
					data: {
						status: 1,
						pageSize: 1,
						currentPage: 1,
						is_teach_paypal: true,
						id: me.id
					},
					success: (res) => {
						if(res.data.code == 0){
							me.carryData = res.data.data[0]
							res.data.data.forEach((itme) => {
								let a = []
								if(me.carryData.picts.indexOf(",") == -1){
									a.push(me.carryData.picts)
									itme.introductionPicture = a
								}else {
									itme.introductionPicture = me.carryData.picts.split(",")
								}
								me.day_fun(itme.create_time)
								itme.new_time = me.day_fun(itme.create_time)
							})
							me.portrait = me.carryData.map.userinfo.avatar
							me.pastTime = me.carryData.new_time
							me.PublisherName = me.carryData.map.userinfo.nick_name
							me.introductionPicture = me.carryData.introductionPicture
							if(me.introductionPicture[0].indexOf("userid") != -1){
								me.isvideo = true
							}else {
								me.isvideo = false
							}
							me.content = me.carryData.content
							me.likeinfo = me.carryData.map.likeinfo
							me.noteCommentEntities = me.carryData.map.noteCommentEntities
							me.pinglun = "评论" + "  " + me.carryData.comment_count
							me.dainzan = "点赞" + "  " +  me.carryData.like_count
						}
					}
				})
			},
			
			browse(index) {
				let me = this
				uni.previewImage({
					urls: me.introductionPicture,
					current: index
				})
			},
			
			onChange(event) {
				this.v_if = event.detail.index
			},
			
		},
		
		onLoad(options) {
			const ite = options.dataBox
			this.id = ite
			this.details()
		},
		
		onReady() {
			
		},
		
		mounted() {
			
		}
	}
</script>
<style lang="scss" scoped>
	.slideCla {
		height: 92vh;
		border-top:1rpx solid #D6D6D6;
		padding-bottom: 2rpx ;
	}
	.content_type {
		width: 750rpx;
		box-sizing: border-box;
		padding: 50rpx;
		background-color: #FFFFFF;
		.aboveContent{
			display: flex;
			align-items: center;
		}
		.tupian_list {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;
			margin-left: 10rpx;
		}
	}
	.yige {
		width: 670rpx;
		height: 300rpx;
		border-radius: 12rpx;
	}
	.duoge{
		position: relative;
		left: 20rpx;
		width: 260rpx;
		height: 260rpx;
		border-radius: 12rpx;
		margin-right: 60rpx;
		margin-top: 30rpx;
	}
	.below_content {
		background-color: #FFFFFF;
		margin-top: 30rpx;
		width: 750rpx;
		padding-bottom: 10rpx;
		background: #FFFFFF;
		position: relative;
		top: 6px;
	}
	
	.arriveTopClass {
		background-color: #FFFFFF;
		width: 750rpx;
		padding-bottom: 10rpx;
		position: sticky;
		top: 0;
		background: #FFFFFF;
		border-top: 0.5rpx solid #D6D6D6;
	}
</style>